<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
	<style type="text/css">
		li{
			text-indent: 3em;
		}
	</style>
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>事件冒泡</h4>
				<div>DOM2级事件的"三个阶段"</div>
				<ul>
					<li>(w3c)	捕获阶段-->处于目标阶段-->冒泡阶段</li>
					<li>(IE)	处于目标阶段-->冒泡阶段</li>
				</ul>
				<ul>
					<li>只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有的元素都绑定事件，减少内存占用空间，提升性能。</li>
					<li>动态新增的元素无需重新绑定事件</li>
					<li>事件委托的实现依靠的冒泡，因此不支持事件冒泡的事件就不适合使用事件委托。</li>
					<li>不是所有的事件绑定都适合使用事件委托，不恰当使用反而可能导致不需要绑定事件的元素也被绑定上了事件。</li>
				</ul>
				<p>addEventListener()第三个参数表示触发事件的阶段,false(默认值:冒泡阶段触发),true(捕获阶段触发)</p>
				<pre>
	//阻止事件冒泡
	e.stopPropagation()
	btn.addEventListener("click",function(e){
		alert("hello");
	},false);	
	
	e.preventDefault();		
	var btn = document.querySelector("a")	
	btn.addEventListener("click",function(e){
		e.preventDefault();	//阻止默认事件
		alert("world");
	},true);			
				</pre>
			</div>
			<div>
				<h4>事件委托</h4>
				<pre>
	使用事件委托
	var btn=document.querySelector("bottun");
	btn.addEventListener("click",function(e){
		console.log("当前点击的元素是",e.target.className);
		if(e.target.className=="son"&&e.target.nodeName=="DIV"){
			alert("我是");
		}
	})				
				</pre>
			</div>
			<div>
				<h4>事件委托高级写法</h4>
				<pre>
	function delegate(element, eventType, selector, fn) {
	     element.addEventListener(eventType, e => {
	       let el = e.target
	       while (!el.matches(selector)) {
	         if (element === el) {
	           el = null
	           break
	         }
	         el = el.parentNode
	       }
	       el && fn.call(el, e, el)
	     })
	     return element
	   }
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>